<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { translate } from '../i18n'
import { useStore } from '../store'
// const props = defineProps({
//     selection: Number
// })


const selection = ref(0)

const store = useStore()

const router = useRouter()
const home = () => {
  selection.value = 0
  router.push('/')
}
const gamelist =()=>{
  selection.value = 1
  router.push('/gamelistpage')
}
const voice=()=>{
  selection.value = 2
  router.push('/voicePage')
}
const tool=()=>{
  selection.value = 3
  router.push('/toolPage')
}
const settings = () => {
  selection.value = 4
  router.push('/settingspage')
}

const winClose = async () => {
  if (store.settings.general.quitOnClose) {
    await window.win.close()
  } else {
    await window.win.tray()
  }
}
const winMin = () => {
  window.win.min()
}
const winMax = () => {
  window.win.max()
}
</script>

<template>
  <div class="drag main-wrapper">
    <div class="title-wrapper">
      <img src="../../public/game-space-svgrepo-com.svg" />
      <div class="title">GameLib</div>
    </div>
    <div class="no-drag icons-wrapper">
      <div class="header-icon" :class="{ selected: selection == 0 }">
        <img src="../assets/home.svg" class="non-game" @click="home" />
      </div>

      <div class="header-icon" :class="{ selected: selection == 1 }">
        <img src="../assets/game.svg" class="non-game" @click="gamelist" />
      </div>

      <div class="header-icon" :class="{ selected: selection == 2 }">
        <img src="../assets/voice.svg" class="non-game" @click="voice" />
      </div>
      <div class="header-icon" :class="{ selected: selection == 3 }">
        <img src="../assets/tool.svg" class="non-game" @click="tool" />
      </div>
      <div class="header-icon" :class="{ selected: selection == 4 }">
        <img
          src="../assets/setting.svg"
          @click="settings"
          class="non-game p-[2px]"
        />
      </div>
    </div>
    <div class="drag focus" style="width: 35vw">
      <div class="traffic-lights no-drag py-3">
        <div class="traffic-light traffic-light-maximize" @click="winMax"></div>
        <div class="traffic-light traffic-light-minimize" @click="winMin"></div>
        <div class="traffic-light traffic-light-close" @click="winClose"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-wrapper {
  @apply sticky z-50 top-0 left-0;
  @apply flex flex-row justify-between w-full;
  height: 56px;
}

.title-wrapper {
  @apply mt-3 ml-2 text-left flex flex-row;
  width: 35vw;

  img {
    @apply h-6 mt-1;
  }
}

.title {
  @apply ml-2 mt-[2px];
}

.icons-wrapper {
  @apply flex flex-row h-full;
  @apply items-center justify-items-center;

  .header-icon {
    @apply mx-2 rounded-lg h-8 transition-all hover:scale-110 active:scale-90;

    & > img {
      @apply size-full rounded-lg;
    }

    & > .non-game {
      @apply opacity-60;

      .dark & {
        @apply invert;
      }
    }

    &.selected {
      @apply hover:scale-100;
      height: 42px;
      background-color: rgb(135, 182, 249, 0.3);
      border: 5px solid rgb(121, 184, 255);
    }
  }
}

.drag {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}
</style>
